import SvgIcon from "../svgIcon";
import { Breadcrumb, Tooltip } from "antd";
import { useRecoilState } from "recoil";
import { getBreadcrumb, naviState } from "../../stores/navi";
import { userState } from "../../stores/user";
import { useEffect, useState, memo } from "react";
/**
 * 顶部top-bar 右侧
 * @returns
 */

const TopbarLeft = () => {
  const [navi, setNavi] = useRecoilState(naviState);
  const [user] = useRecoilState(userState);
  const [breadcrumb, setBreadcrumb] = useState<{ title: string }[]>([]);
  useEffect(() => {
    if (user.route) {
      setBreadcrumb(
        getBreadcrumb(parseInt(navi.defaultSelectedKeys[0]), user.route, [])
      );
    }
  }, [navi, user]);

  /**
   *  展开/关闭侧边栏
   * @param status
   * @returns void
   */
  const changeNaiBarStatus = (status: boolean) => {
    setNavi({ ...navi, defaultOpenStatus: status });
  };

  /**
   * 控制刷新图标旋转
   */
  const [rotate, setRotate] = useState<boolean>(false);
  /**
   * 刷新页面
   */
  const refresh = () => {
    setRotate(true);
    setTimeout(() => {
      setRotate(false);
    }, 2000);
  };
  return (
    <>
      {navi.defaultOpenStatus ? (
        <Tooltip placement="bottomLeft" title={"展开侧边栏"}>
          <div
            className="item"
            onClick={() => {
              changeNaiBarStatus(false);
            }}
          >
            <SvgIcon name="indent" size={18} />
          </div>
        </Tooltip>
      ) : (
        <Tooltip placement="bottomLeft" title={"收缩侧边栏"}>
          <div
            className="item"
            onClick={() => {
              changeNaiBarStatus(true);
            }}
          >
            <SvgIcon name="outdent" size={18} />
          </div>
        </Tooltip>
      )}
      <Tooltip placement="bottomLeft" title={"刷新页面"}>
        <div
          className={rotate ? "item rotate" : "item"}
          onClick={() => refresh()}
        >
          <SvgIcon name="arrows-rotate" size={18} />
        </div>
      </Tooltip>
      <div className="item-breadcrumb">
        <Breadcrumb items={breadcrumb} />
      </div>
    </>
  );
};

export default memo(TopbarLeft);
